<template>
	<view class="card-section">
		<view class="card-grid">
			<view
				class="folder-card"
				v-for="(item, index) in list"
				:key="index"
				@tap="handleClick(item)">
				<view class="vip-tag" v-if="false">
					<image
						src="/static/images/vip.png"
						style="width: 24rpx; height: 24rpx"
						alt="" />
					<text>VIP专享</text>
				</view>
				<view class="card-content">
					<image
						class="card-icon"
						:src="icon"
						mode="aspectFit" />
					<view class="card-text">
						<view class="folder-title">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue'

const props = defineProps({
	list: {
		type: Array,
		required: true
	},
	type: {
		type: String,
		default: 'all'
	}
})

const emit = defineEmits(['click'])

const icon = computed(() => {
	if (props.type === 'all') {
		return '/static/images/Edexcel.svg'
	}
	return '/static/images/folder.png'
})

const handleClick = (item) => {
	emit('click', item)
}
</script>

<style lang="scss" scoped>
.card-section {
	// margin-top: 20rpx;
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24rpx;
}

.folder-card {
	position: relative;
	height: 300rpx;
	border-radius: 22rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.74);
	background: linear-gradient(196deg, #ebebed 4.22%, #b3e2f6 89.05%);
	box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(255, 255, 255, 0.81) inset,
		0rpx 8rpx 60rpx 0rpx rgba(165, 177, 205, 0.46);
	backdrop-filter: blur(4rpx);

	.vip-tag {
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 20rpx 0 20rpx 0;
		background: linear-gradient(to bottom, #3bccdd, #5b88e5);
		padding: 8rpx 16rpx;
		display: flex;
		align-items: center;
		gap: 4rpx;

		image {
			width: 24rpx;
			height: 24rpx;
		}

		text {
			font-size: 20rpx;
			color: #ffffff;
		}
	}

	.card-content {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.card-icon {
			width: 120rpx;
			height: 120rpx;
			margin-top: 80rpx;
			margin-bottom: 20rpx;
		}

		.card-text {
			width: 100%;
			text-align: center;

			.folder-title {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
		}
	}

	&:active {
		transform: scale(0.98);
		transition: transform 0.2s;
	}
}
</style>
